<template>
	<view class="myMbx">
		<u-tabs
			name="cate_name"
			:list="list"
			font-size="28"
			gutter="30"
			:is-scroll="isScroll"
			:show-bar="false"
			:current="current"
			@change="change"
			:active-item-style="activeItem"
		></u-tabs>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			isScroll: false,
			current: 0,
			activeItem: {
				background: 'linear-gradient(147deg, #ff614c 0%, #ff8e4c 100%)',
				color: '#ffffff !important',
				'box-shadow': '0px 0px 14rpx rgba(88, 88, 88, 0.16)',
				'border-radius': ' 46rpx'
			}
		};
	},
	watch: {
			
	}, 
	created() {
		if (this.list.length > 4) {
			this.isScroll = true;
		} else {
			this.isScroll = false;
		}
	},
	methods: {
		change(index) {
			this.current = index;
		}
	}
};
</script>

<style scoped>
.myMbx {
	margin-left: -30rpx;
	padding: 0 40rpx;
}
</style>
